<%--
  Created by IntelliJ IDEA.
  User: zhangxr103
  Date: 2014/10/21
  Time: 14:03
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<%
    String phone = null;
    Object number = request.getParameter("number");
    if (number != null && !number.toString().isEmpty() || request.getSession().getAttribute("number") != null) {
        if (number != null && !number.toString().isEmpty()) {
            request.getSession().setAttribute("number", number);
        }
        phone = request.getSession().getAttribute("number").toString();
    } else {
        response.sendRedirect(request.getContextPath()+"/pages/startpage.jsp");
    }
%>
<html>
<head>
    <title>位置记录</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="baidu-site-verification" content="jyYTX3S6Lz">
    <script src="<%=request.getContextPath()%>/js/jquery/jquery-2.0.0.min.js" type="text/javascript"></script>
    <script src="<%=request.getContextPath()%>/js/bootstrap/bootstrap.min.js" type="text/javascript"></script>
    <script src="<%=request.getContextPath()%>/js/highcharts/highcharts.js" type="text/javascript"></script>
    <link href="<%=request.getContextPath()%>/css/bootstrap-combined.min.css" rel="stylesheet" media="screen">

    <meta name="baidu-site-verification" content="jyYTX3S6Lz"/>
    <script type="text/javascript" src="<%=request.getContextPath()%>/js/baidumap/api.baidu.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/js/baidumap/api.map.baidu.js"></script>

    <%--<script type="text/javascript"--%>
            <%--src="http://api.map.baidu.com/api?v=2.0&ak=3408ef3f3ee5f8864aa08c923432d052"></script>--%>
    <%--<script type="text/javascript" src="http://api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js"></script>--%>


    <style type="text/css">

        #container {
            height: 600px;
            width: 800px;
            float: left;
            border-right: 2px solid #bcbcbc;
        }

        #r-result {
            height: 330px;
            width: 200px;
            float: left;
        }

        .btn-container {
            margin: 20px;
        }

        fieldset {
            border: 1px solid;
            border-radius: 3px;
        }

        fieldset label {
            font-size: 14px;
            line-height: 30px;
        }

        .btn {
            color: #333;
            background-color: #fff;
            display: inline-block;
            padding: 6px 12px;
            font-size: 14px;
            font-weight: normal;
            line-height: 1.428571429;
            border: 1px solid #ccc;
            border-radius: 4px;
            margin-top: 5px;
            margin-bottom: 5px;
        }

        .btn:hover {
            color: #333;
            background-color: #ebebeb;
            border-color: #adadad;
        }

        .text-primary {
            font-weight: bold;
        }

        textarea {
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        textarea:focus {
            border-color: #66afe9;
            outline: 0;
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
        }

        .color-list li {
            font-size: 14px;
            line-height: 30px;
        }
    </style>

</head>
<body>
<div class="container-fluid">
    <div class="row-fluid">
        <div class="span12" >
            <div class="span12" >
                <img src="<%=request.getContextPath()%>/img/header.jpg" style="width: 100%;height:25%;">
            </div>
        </div>
    </div>
    <div class="row-fluid">
        <div class="span12">
            <ul class="nav nav-tabs">
                <li >
                    <a href="<%=request.getContextPath()%>/pages/privacy.jsp">基本信息</a>
                </li>
                <%--<li >--%>
                    <%--<a href="<%=request.getContextPath()%>/pages/rank.jsp">信用排名</a>--%>
                <%--</li>--%>
                <li>
                    <a href="<%=request.getContextPath()%>/pages/finance.jsp">消费走势</a>
                </li>
                <li class="active">
                    <a href="<%=request.getContextPath()%>/pages/location.jsp">位置跟踪</a>
                </li>
                <li>
                    <a href="<%=request.getContextPath()%>/pages/socialnetwork.jsp">社交网络</a>
                </li>
                <li class="dropdown pull-right">
                    <a href="#" data-toggle="dropdown" class="dropdown-toggle"><%=phone%><strong class="caret"></strong></a>
                    <ul class="dropdown-menu">
                        <li>
                            <a href="#"></a>
                        </li>
                        <li>
                            <a href="#">设置栏目</a>
                        </li>
                        <li>
                            <a href="#">更多设置</a>
                        </li>
                        <li class="divider">
                        </li>
                        <li>
                            <a href="<%=request.getContextPath()%>/pages/startpage.jsp">退出</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <div class="row-fluid">
        <div class="span12">
            <%--<div class="mid-container" style="margin: 0 auto;width:1100px;position:relative;position:relative;height:auto;margin-top:0px;margin-bottom:10px;padding-top:20px;padding-bottom:10px;">--%>
                <%--<div id="title">--%>
                    <%--<ul style="list-style:none;float:left;">--%>
                        <%--<li style="float:left;text-align:left;vertical-align:middle;"><img src="chinaunicom.png"--%>
                                                                                           <%--style="float:left;text-align:left;vertical-align:middle;width:249px;height:74px;border:0px;">--%>
                        <%--</li>--%>
                        <%--<li style="float:left;text-align:rigth;vertical-align:text-bottom;margin-top:20px;margin-left:300px;font-size:30px;font-weight:bold;">--%>
                            <%--中国联通征信查询分析系统--%>
                        <%--</li>--%>
                    <%--</ul>--%>
                <%--</div>--%>
                <%--<div id="diffColorLine"--%>
                     <%--style="text-align:center;margin-left:40px;vertical-align:middle;width:550px;border:0px;"><img--%>
                        <%--src="line.png" style="width:1000px;border:0px;"></div>--%>

                <div class="text-center">
                    <span>位置跟踪热力图</span>
                </div>
                <div id="container"
                     style="left:20%;height:80%;width:60%;margin-left:20px;margin-top:4px;margin-bottom:40px;padding-bottom:40px;border:1px solid #bcbcbc;">
                    <script type="text/javascript">
                        var map = new BMap.Map("container");          // 创建地图实例

                        var point = new BMap.Point(105.0, 35.8);
                        map.centerAndZoom(point, 5);             // 初始化地图，设置中心点坐标和地图级别
                        map.enableScrollWheelZoom(); // 允许滚轮缩放

                        var points = [
                            {"lng": 118.4, "lat": 35.11, "count": 462},
                            {"lng": 119.1, "lat": 36.71, "count": 857},
                            {"lng": 121.4, "lat": 37.47, "count": 671},
                            {"lng": 118.4, "lat": 35.11, "count": 494},
                            {"lng": 116.6, "lat": 35.42, "count": 761},
                            {"lng": 120.4, "lat": 36.08, "count": 960},
                            {"lng": 116.4, "lat": 37.42, "count": 629},
                            {"lng": 118.0, "lat": 37.39, "count": 622},
                            {"lng": 116.0, "lat": 36.45, "count": 376},
                            {"lng": 117.1, "lat": 36.65, "count": 815},
                            {"lng": 118.7, "lat": 37.43, "count": 761},
                            {"lng": 117.1, "lat": 36.19, "count": 329},
                            {"lng": 118.0, "lat": 36.81, "count": 423},
                            {"lng": 108.4, "lat": 38.11, "count": 494},
                            {"lng": 106.6, "lat": 35.42, "count": 761},
                            {"lng": 100.4, "lat": 40.08, "count": 960},
                            {"lng": 106.4, "lat": 41.42, "count": 629},
                            {"lng": 108.0, "lat": 37.39, "count": 622},
                            {"lng": 106.0, "lat": 33.45, "count": 376},
                            {"lng": 107.1, "lat": 32.65, "count": 815},
                            {"lng": 108.7, "lat": 31.43, "count": 761},
                            {"lng": 107.1, "lat": 30.19, "count": 329},
                            {"lng": 118.0, "lat": 36.81, "count": 423},
                            {"lng": 122.1, "lat": 37.52, "count": 512},
                            {"lng": 119.5, "lat": 35.42, "count": 608},
                            {"lng": 117.3, "lat": 34.81, "count": 245},
                            {"lng": 117.7, "lat": 36.21, "count": 388}
                        ];


                        if (!isSupportCanvas()) {
                            alert('热力图目前只支持有canvas支持的浏览器,您所使用的浏览器不能使用热力图功能~')
                        }


                        //详细的参数,可以查看heatmap.js的文档 https://github.com/pa7/heatmap.js/blob/master/README.md

                        //参数说明如下:
                        /* visible 热力图是否显示,默认为true
                         * opacity 热力的透明度,1-100
                         * radius 势力图的每个点的半径大小
                         * gradient  {JSON} 热力图的渐变区间 . gradient如下所示
                         *  {
                         .2:'rgb(0, 255, 255)',
                         .5:'rgb(0, 110, 255)',
                         .8:'rgb(100, 0, 255)'
                         }
                         其中 key 表示插值的位置, 0~1.
                         value 为颜色值.
                         */
                        heatmapOverlay = new BMapLib.HeatmapOverlay({"radius": 20});
                        map.addOverlay(heatmapOverlay);
                        heatmapOverlay.setDataSet({data: points, max: 1000});


                        function setRadius(radius) {
                            document.getElementById("radius-result").innerHTML = radius;
                            heatmapOverlay.setOptions({"radius": radius})
                        }

                        function setOpacity(opacity) {
                            document.getElementById("opacity-result").innerHTML = opacity;
                            heatmapOverlay.setOptions({"opacity": opacity})
                        }

                        function toggle() {
                            heatmapOverlay.toggle()
                        }

                        function setGradient() {

                            /*
                             格式如下所示:
                             {
                             0:'rgb(102, 255, 0)',
                             .5:'rgb(255, 170, 0)',
                             1:'rgb(255, 0, 0)'
                             }
                             */
                            var gradient = {};
                            var colors = document.querySelectorAll("input[type='color']");
                            colors = [].slice.call(colors, 0);
                            colors.forEach(function (ele) {
                                gradient[ele.getAttribute("data-key")] = ele.value;
                            });
                            heatmapOverlay.setOptions({"gradient": gradient});
                        }


                        function isSupportCanvas() {
                            var elem = document.createElement('canvas');
                            return !!(elem.getContext && elem.getContext('2d'));
                        }
                    </script>
                </div>

                <%--<div id="r-result" style="margin-top:150px;padding-bottom:40px;">--%>
                    <%--<div class="btn-container">--%>
                        <%--<fieldset>--%>
                            <%--<legend>热力图设置区域</legend>--%>
                            <%--<label>设置热力图半径0-100</label>--%>
                            <%--<input type="range" max="100" style="width:150px" min="1" value="20"--%>
                                   <%--onchange="setRadius(this.value)">--%>
                            <%--<span id="radius-result" class="text-primary">20</span>--%>
                            <%--<br/>--%>
                            <%--<label>设置热力图透明度0-100</label>--%>
                            <%--<input type="range" max="100" style="width:150px" min="1" value="60"--%>
                                   <%--onchange="setOpacity(this.value)">--%>
                            <%--<span id="opacity-result" class="text-primary">60</span>--%>
                            <%--<br/>--%>
                            <%--<label>设置热力图渐变区间</label>--%>

                            <%--<ul class="color-list" style="list-style:none;">--%>
                                <%--<li>起始颜色: <input data-key="0.1" type="color" value="#66FF00" onchange="setGradient()"/>--%>
                                <%--</li>--%>
                                <%--<li>中间颜色: <input data-key="0.5" type="color" value="#FFAA00" onchange="setGradient()"/>--%>
                                <%--</li>--%>
                                <%--<li>结束颜色: <input data-key="1.0" type="color" value="#FF0000" onchange="setGradient()"/>--%>
                                <%--</li>--%>
                            <%--</ul>--%>

                            <%--<span style="font-size:14px;">显示热力图:</span><input type="checkbox" onclick="toggle();"--%>
                                                                              <%--checked="checked"/></br>--%>
                        <%--</fieldset>--%>
                    <%--</div>--%>
                <%--</div>--%>
            <%--</div>--%>
        </div>
    </div>
</div>
<div id="bottom" style="clear:both;bottom:0;text-align:center;vertical-align:middle;width:100%;border:0px;"><span>版权所有@中国联合网络通信有限公司研究院</span></div>
</body>
</html>
